<template>
  <div class="replySet">
<!--    <div class="header">-->
<!--      <span>回复速度: </span>-->
<!--      <el-radio-group size="small" v-model="radioValue">-->
<!--        <el-radio :value="1" size="large">AI拟人回复(3~10秒)</el-radio>-->
<!--      </el-radio-group>-->
<!--    </div>-->
    <div class="content">
      <div class="con_left">
        <div class="left_header">
          <div>问题分类({{categoryList.length}})</div>
          <el-button type="primary" style="margin: 10px 0;" size="default" @click="editCategory('add')">+ 添加分类</el-button>
          <el-input v-model="searchKey" @input="changeSearch" :clearable="true" :prefix-icon="Search" placeholder="搜索问题分类名称"></el-input>
        </div>
        <el-scrollbar height="calc(100vh - 420px)" v-loading="cateLoading">
          <div class="categoryList">
            <div class="categoryItem" @click="clickCategory(item)" :class="{'active': activeCategory == item.id}" v-for="item in categoryList" :key="item.id">{{ item.strategyName }}</div>
          </div>
        </el-scrollbar>

      </div>
      <div class="con_right">
        <div style="margin-bottom: 10px;">
          <el-button type="primary" size="default" :disabled="!activeCategory"  @click="editReply( 'add')">+ 添加回复</el-button>
          <el-button style="margin-left: 10px;" icon="Setting" :disabled="!activeCategory" @click="editCategory('edit')">设置</el-button>
        </div>
        <el-table
          :data="tableData"
          v-loading="tableLoading"
          size="small"
          style="width: 100%;"
          height="calc(100vh - 340px)"
          border
          :header-cell-style="{ background: '#f4f4f4', color: '#000' }"
        >
          <el-table-column prop="pushFlag" label="开关" width="100px" align="center">
            <template #default="{row}">
              <el-switch  @change="changeStatus(row)"  :active-value="1" :inactive-value="0" v-model="row.useStatus"></el-switch>
            </template>
          </el-table-column>

          <el-table-column prop="contentList" label="回复内容" align="center" >
            <template #default="{row}">
              <div v-for="(item, index) in row.msgContent" :key="index">
                <p style="color: #1890ff;" v-if="item.type === 1">{{ item.content }}</p>
                <el-image v-else-if="item.type === 2 && item.content" style="height: 50px" :src="item.content" fit="cover"></el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="100px">
            <template #default="{row}">
              <el-button link type="primary" size="small" @click="editReply( 'edit' ,row)">编辑</el-button>
              <el-button link type="danger" size="small" @click="delReply(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <EditOrAddCategory ref="EditOrAddCategoryRef" @changeCategory="getCategoryList"></EditOrAddCategory>
    <EditOrAddReply ref="EditOrAddReplyRef" @changeReply="getTableList"></EditOrAddReply>
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import {ref, onMounted, inject} from "vue"
import {
  delete_auto_reply_content,
  get_auto_reply_strategy_list,
  get_reply_category_question_list,
  set_content_use_status
} from "@/api/settingtApi"
import EditOrAddReply from "./editOrAddReply"
import EditOrAddCategory from "./editOrAddCategory"
import {debounce} from "@/utils/d_fun"
import {ElMessage, ElMessageBox} from "element-plus";

const currentBotId = inject("currentBotId")


onMounted(() => {
  getCategoryList()
})

const activeCategory = ref(1)
const categoryList = ref([])
const cateLoading = ref(false)
const searchKey = ref()
const getCategoryList = async () => {
  cateLoading.value = true
  const res = await get_auto_reply_strategy_list({robotId: currentBotId})
  categoryList.value = res.data.list || []
  if(categoryList.value.length) {
    const activeFlag = categoryList.value.some(el => el.id === activeCategory.value)
    if(!activeFlag) {
      activeCategory.value = categoryList.value[0].id
    }
    getTableList()
  }
  cateLoading.value = false
}
const clickCategory = (row) => {
  activeCategory.value = row.id
  getTableList()
}
const changeSearch = debounce(
  () => {
    console.log(13)
  }
)


const tableData = ref([])
const tableLoading = ref(false)
const getTableList = () => {
  tableLoading.value = true
  get_reply_category_question_list({strategyId: activeCategory.value}).then(res => {
    tableData.value = res.data.list
  })
  tableLoading.value = false
}


const EditOrAddReplyRef = ref()
const editReply = (type,item = {}) => {
  let categoryItem = categoryList.value.find(el => el.id === activeCategory.value)
  EditOrAddReplyRef.value.openDialog(type,item, categoryItem)
}
const delReply = (row) => {
  ElMessageBox.confirm(
    '确定删除该回复吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async (res) => {
    const result = await delete_auto_reply_content({id: row.id})
    ElMessage.success(result.msg)
    getTableList()
  }).catch(() => {

  })
}

const EditOrAddCategoryRef = ref()
const editCategory = (type) => {
  let item = {}
  item = categoryList.value.find(el => el.id === activeCategory.value)
  EditOrAddCategoryRef.value.openDialog(type,item)
}

const changeStatus = (item) => {
  set_content_use_status({
    id: item.id,
    status: item.useStatus ? 1 : 0
  }).then(res => {
    ElMessage.success(res.msg)
  })
}
</script>

<style lang="scss" scoped>
.replySet {
  font-size: 14px;
  .header {
    margin-left: 30px;
    margin-top: 20px;
    font-size: 12px;
    display: flex;
    align-items: center;
    ::v-deep(.el-radio__label) {
      font-size: 12px;
    }
    .el-radio-group {
      margin-left: 10px;
    }
  }
}
.con_left {
  width: 250px;
  border: 1px solid $borderColor;
  .left_header {
    padding: 10px;
  }
  .categoryList {
    .categoryItem{
      padding: 20px 10px;
      cursor: pointer;
    }
    //.categoryItem:hover{
    //  background: #e8f4fd;
    //}
    .active{
      background: #e8f4fd;
    }
  }
}
.content {
  padding: 10px 20px;
  display: flex;
}
.con_right {
  flex: 1;
  margin-left: 20px;
}

</style>